
<template>
  <div class="ContainerLog">
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox
        :indeterminate="indeterminate"
        @change="onCheckAllChange"
        :checked="checkAll"
      >Check all</a-checkbox>
    </div>
    <br />
    <a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />
  </div>
</template>

<script>
const plainOptions = [
  { label: "销售订单", value: 0 },
  { label: "售后订单", value: 1 },
  { label: "异常订单", value: 2 },
  { label: "a", value: 3 },
  { label: "b", value: 4 },
  { label: "c", value: 5 }
];
const a = [
  { label: "a", value: 3 },
  { label: "b", value: 4 },
  { label: "c", value: 5 }
];
const defaultCheckedList = [];
export default {
  name: "ContainerLog",
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      let plainOption = [];
      if (e.target.checked) {
        plainOption = plainOptions.map(item => item.value);
      }
      Object.assign(this, {
        checkedList: e.target.checked ? plainOption : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    }
  },
  created() {},
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
